<template>
  <div class="app-container">
    <div class="flex">
      <!-- <div class="left">
        <el-button @click="addCatelog" class="addCatelog">添加目录</el-button>
        <el-input placeholder="输入关键字进行过滤" v-model="filterText">
        </el-input>
        <el-tree
          class="filter-tree"
          ref="tree"
          :data="treeData"
          :props="defaultProps"
          default-expand-all
          highlight-current
          :filter-node-method="filterNode"
          @node-click="handleNodeClick"
        >
        </el-tree>
      </div> -->
      <div class="left">
        <div class="comp-tree">
          <el-button class="comp-tr-top" type="primary" size="small" @click="handleAddTop"
            style="width: 100%; margin-bottom: 0.5em;">添加数据血缘目录</el-button>
          <!-- tree -->
          <el-input placeholder="输入关键字进行搜索" v-model="filterText" style="margin-bottom: 0.5em;">
          </el-input>
          <el-tree ref="SlotTree" :data="treeList" :props="defaultProps" :current-node-key="currentNodekey"
            :expand-on-click-node="false" highlight-current default-expand-all :filter-node-method="filterNode"
            :node-key="NODE_KEY" @node-click="handleNodeClick">
            <div class="comp-tr-node" slot-scope="{ node, data }">
              <!-- 编辑状态 -->
              <template v-if="node.isEdit">
                <el-input v-model="data.name" autofocus size="mini" :ref="'slotTreeInput' + data[NODE_KEY]"
                  @blur.stop="handleInput(node, data)" @keyup.enter.native="handleInput(node, data)"></el-input>
              </template>

              <!-- 非编辑状态 -->
              <template v-else>
                <!-- 名称： 新增节点增加class（is-new） -->
                <!-- <span :class="[data[NODE_KEY] < NODE_ID_START ? 'is-new' : '', 'comp-tr-node--name']">
                  {{ node.label }}
                </span> -->
                <el-tooltip class="item" effect="dark" :content="node.label" placement="top">
                  <!-- 名称： 新增节点增加class（is-new） -->

                  <span v-if="data.isDirectory != '1'" :class="[
                    data[NODE_KEY] < NODE_ID_START ? 'is-new' : '',
                    'comp-tr-node--name'
                  ]">
                    {{ node.label }}
                  </span>
                  <span v-else :class="[
                    data[NODE_KEY] < NODE_ID_START ? 'is-new' : '',
                    'comp-tr-node--name'
                  ]">
                    {{ node.label }}
                  </span>
                </el-tooltip>
                <!-- 按钮 -->
                <el-dropdown placement="top" style="margin-left: 10%;" v-if="data.isDirectory != '1'">
                  <span class="el-dropdown-link">
                    <i class="el-icon-more el-icon--right"></i>
                  </span>
                  <el-dropdown-menu>
                    <!-- 新增 -->
                    <el-tooltip class="item" effect="dark" content="添加子节点" placement="top">
                      <el-button v-if="data.isDirectory != '1'" icon="el-icon-plus" size="large" circle title="添加子节点"
                        @click="handleAdd(node, data)" style="
                          border: none;
                          background-color: transparent;
                          transform: scale(1.1);
                        "></el-button>
                    </el-tooltip>
                    <el-tooltip class="item" effect="dark" content="查看节点详情" placement="top">
                      <!-- 查看 -->
                      <el-button icon="el-icon-document" size="large" circle title="查看节点详情"
                        @click="handleLook(node, data)" style="
                          border: none;
                          background-color: transparent;
                          transform: scale(1.1);
                        "></el-button>
                    </el-tooltip>
                    <el-tooltip class="item" effect="dark" content="编辑节点" placement="top">
                      <el-button icon="el-icon-edit" size="large" circle title="编辑节点" @click="handleEdit(node, data)"
                        style="
                          border: none;
                          background-color: transparent;
                          transform: scale(1.1);
                        "></el-button>
                    </el-tooltip>
                    <el-tooltip class="item" effect="dark" content="删除节点" placement="top">
                      <el-button icon="el-icon-delete" size="large" circle title="删除节点"
                        @click="handleDeletetree(node, data)" style="
                          border: none;
                          background-color: transparent;
                          transform: scale(1.1);
                        "></el-button>
                    </el-tooltip>
                  </el-dropdown-menu>
                </el-dropdown>
              </template>
            </div>
          </el-tree>
        </div>
      </div>
      <div class="right">
        <div class="r-top">
          <el-button type="primary" @click="add" class="add" plain>新增血缘关系</el-button>
          <el-button type="success" @click="edit" class="edit" plain>修改</el-button>
          <el-button type="danger" plain @click="remove" class="delete">删除</el-button>
        </div>
        <div class="r-bottom">
          <div id="x6model" ref="graphContainer" style="width: 80vw; height: 90vh;">
            <div class="topBox">
              <div class="boxItem" v-for="(item, index) in x6List.cellList" :key="item.tableId" :class="`box${index}`">
                <div class="drop">
                  <img src="@/assets/img/drop.png" />
                  <div class="line"></div>
                  <div class="circle"></div>
                  <div class="arrowLine2" v-if="index == 2">
                    <!-- <img src="@/assets/img/arrow.png" class="img1 move3" /> -->
                    <img src="@/assets/img/arrow.png" class="img2 move4" />
                  </div>

                  <div class="arrowLine1" v-else>
                    <img :class="index === 3 || index === 4 ? 'move2' : 'move1'" src="@/assets/img/arrow.png" :style="{
                      transform:
                        index === 3 || index === 4 ? 'none' : 'rotate(180deg)'
                    }" />
                  </div>
                </div>
                <div class="card">
                  <div class="buleTitle">
                    <img :src="item.url" />
                    <div class="text">{{ item.name }}</div>
                  </div>
                  <div class="content">
                    <div class="top">{{ item.tableName }}</div>
                    <div class="bottom">{{ item.tableDescription }}</div>
                  </div>
                </div>
              </div>
            </div>
            <div class="bottomBox">
              <div class="bgImg">
                <img src="@/assets/img/kinBg.png" alt="" />
              </div>
              <div class="useBox">
                <div class="useItem" v-for="(item, index) in useList" :key="index">
                  <div class="point"></div>
                  <img src="@/assets/img/useItem.png" />
                  <div class="useItemText">
                    {{ item }}
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 新增的弹窗 -->
    <!-- :visible.sync="dialogFormVisible" -->
    <el-dialog title="新增血缘关系" :visible.sync="dialogFormVisible" v-if="dialogFormVisible">
      <el-form :model="form">
        <el-form-item label="目录" :label-width="formLabelWidth">
          <el-select v-model="form.region" filterable placeholder="请选择目录" @change="selectChange">
            <el-option v-for="item in selectOptions" :key="item.id" :label="item.label" :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="名称" :label-width="formLabelWidth">
          <el-input v-model="form.name" autocomplete="off" placeholder="请输入名称"></el-input>
        </el-form-item>
        <el-form-item label="备注" :label-width="formLabelWidth">
          <el-input type="textarea" :rows="3" placeholder="请输入备注" v-model="form.desc">
          </el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="closeDialog">取 消</el-button>
        <el-button :disabled="isdisabled" type="primary" @click="confirmDialog">确 定</el-button>
      </div>
    </el-dialog>
    <!-- 点击新增确定后弹窗 -->
    <child-modal v-if="modalVisible" :value="modalVisible" @update:value="handleModalVisible" @getTreeList="getTreeList"
      :params="subParams" :editItem="editItem"></child-modal>
    <treeData ref="treeForm" @getTreeList="getTreeList" />
  </div>
</template>

<script>
import { Graph } from '@antv/x6'
import ChildModal from './add/index.vue'
import treeData from './treeData.vue'
import {
  fetchMasterdataDirectoryList,
  deleteMasterdataDirectory
} from '@/api/masterdata/masterdataDirectory'
import { addMetaModel, dataBloodRelation } from '@/api/dataKinship/index.js'
export default {
  name: 'SdssDatagovernanceFrontendIndex',
  components: {
    ChildModal,
    treeData
  },
  data() {
    return {
      isdisabled: false,
      graph: null,
      filterText: '',
      dialogFormVisible: false, //新增弹窗
      modalVisible: false, //确定新增后的弹窗
      form: {
        name: '',
        region: '',
        desc: ''
      },
      formLabelWidth: '100px',
      selectOptions: [],

      //x6数据

      x6List: {
        cellList: [
          {
            tableId: '9991',
            tableName: '胶东调水-水量调度数据库-生产',
            tableDescription: 'T_YJDD_PLAN',
            name: '数据源',
            url: require('@/assets/img/数据源.png'),
            x: 100,
            y: 100
          },
          {
            tableId: '9992',
            tableName: 'hive0229',
            tableDescription: 't_b_sluice',
            name: '全量层',
            url: require('@/assets/img/全量层.png'),
            x: 100,
            y: 220
          },
          {
            tableId: '9993',
            tableName: '数据中台-胶东调水-C##JDDS_ETL',
            tableDescription: 'T_ODS_JKD',
            name: '核心层',
            url: require('@/assets/img/核心层.png'),
            x: 100,
            y: 340
          },
          {
            tableId: '9994',
            tableName: '胶东调水-C##JDDS',
            tableDescription: 'T-JKOD',
            name: '主题层',
            url: require('@/assets/img/主题层.png'),
            x: 100,
            y: 460
          },
          {
            tableId: '9995',
            tableName: '数据服务',
            tableDescription: '明渠水情数据',
            name: '服务层',
            url: require('@/assets/img/服务层.png'),
            x: 100,
            y: 580
          }
        ],
        edgeList: [
          // {
          //   sourceId: '9991',
          //   sourceName: '',
          //   targetId: '9992',
          //   targetName: '',
          //   sourcePort: 'port3',
          //   targetPort: 'port1',
          //   sourceCell: null,
          //   targetCell: null,
          // },
          // {
          //   sourceId: '9992',
          //   sourceName: '',
          //   targetId: '9993',
          //   targetName: '',
          //   sourcePort: 'port3',
          //   targetPort: 'port1',
          //   sourceCell: null,
          //   targetCell: null,
          // },
          // {
          //   sourceId: '9993',
          //   sourceName: '',
          //   targetId: '9994',
          //   targetName: '',
          //   sourcePort: 'port3',
          //   targetPort: 'port1',
          //   sourceCell: null,
          //   targetCell: null,
          // },
          // {
          //   sourceId: '9994',
          //   sourceName: '',
          //   targetId: '9995',
          //   targetName: '',
          //   sourcePort: 'port3',
          //   targetPort: 'port1',
          //   sourceCell: null,
          //   targetCell: null,
          // },
        ]
      },

      x6ListWithoutTop: {
        cellList: [
          {
            tableId: '9991',
            tableName: '胶东调水-水量调度数据库-生产',
            tableDescription: 'T_YJDD_PLAN',
            name: '数据源',
            url: require('@/assets/img/数据源.png'),
            x: 100,
            y: 100
          },
          {
            tableId: '9992',
            tableName: 'hive0229',
            tableDescription: 't_b_sluice',
            name: '全量层',
            url: require('@/assets/img/全量层.png'),
            x: 100,
            y: 220
          },
          {
            tableId: '9993',
            tableName: '数据中台-胶东调水-C##JDDS_ETL',
            tableDescription: 'T_ODS_JKD',
            name: '核心层',
            url: require('@/assets/img/核心层.png'),
            x: 100,
            y: 340
          },
          // {
          //   tableId: '9994',
          //   tableName: '主题层',
          //   tableDescription: '9994',
          //   x: 100,
          //   y: 460
          // },
          {
            tableId: '9995',
            tableName: '数据服务',
            tableDescription: '明渠水情数据',
            name: '服务层',
            url: require('@/assets/img/服务层.png'),
            x: 100,
            y: 460
          }
        ],
        edgeList: [
          {
            sourceId: '9991',
            sourceName: '',
            targetId: '9992',
            targetName: '',
            sourcePort: 'port3',
            targetPort: 'port1',
            sourceCell: null,
            targetCell: null
          },
          {
            sourceId: '9992',
            sourceName: '',
            targetId: '9993',
            targetName: '',
            sourcePort: 'port3',
            targetPort: 'port1',
            sourceCell: null,
            targetCell: null
          },
          {
            sourceId: '9993',
            sourceName: '',
            targetId: '9995',
            targetName: '',
            sourcePort: 'port3',
            targetPort: 'port1',
            sourceCell: null,
            targetCell: null
          }
          // {
          //   sourceId: '9994',
          //   sourceName: '',
          //   targetId: '9995',
          //   targetName: '',
          //   sourcePort: 'port3',
          //   targetPort: 'port1',
          //   sourceCell: null,
          //   targetCell: null
          // }
        ]
      },
      useList: [
        // '明渠系统', '泵站系统', '平原水库系统', '管道泵阀系统', '综合告预平台', '知识平台'
      ],
      //树形列表数据
      treeList: [],
      defaultProps: {
        children: 'children',
        label: 'name'
      },
      currentNodekey: '',
      NODE_KEY: 'id',
      MAX_LEVEL: 5,
      listQuery: {
        type: '2',
        jobName: undefined,
        dbType: undefined,
        executeStatus: undefined,
        checkStatus: undefined,
        isSync: undefined,
        directoryId: '',
        page: 1,
        limit: this.$store.getters.defaultPageSize
      },
      deleteId: null,
      startId: null,
      NODE_ID_START: 0,
      treeQuery: {
        tableName: undefined,
        page: 1,
        limit: this.$store.getters.defaultPageSize,
        ancestralId: '11'
      },
      initParam: {
        // 新增参数
        name: '新增节点',
        parentId: 0,
        children: []
      },
      //二级页面需要的传参数据
      subParams: {
        name: '',
        directoryId: ''
      },
      //要修改的树的节点
      editItem: null
    }
  },
  watch: {
    filterText(val) {
      this.$refs.SlotTree.filter(val)
    }
  },
  created() {
    this.getTreeList()
  },
  mounted() {
    // this.getX6Echarts()
  },

  methods: {
    //树搜索
    filterNode(value, data) {
      if (!value) return true
      return data.label.indexOf(value) !== -1
    },
    //下拉框点击
    selectChange(val) {
      // console.log(this.form, val, '下拉框点击的项')
    },
    //删除血缘关系
    remove() {
      if (this.deleteId != null) {
        this.$confirm('是否删除此节点？', '提示', {
          confirmButtonText: '确认',
          cancelButtonText: '取消',
          type: 'warning'
        })
          .then(() => {
            deleteMasterdataDirectory(this.deleteId).then((res) => {
              console.log(res)
              this.$message.success('删除成功！')
              this.$refs.SlotTree.remove(this.deleteId)
              if (this.graph) {
                this.graph.dispose()
              }
              this.getTreeList()
              this.form = {
                name: '',
                region: '',
                desc: ''
              }
            })
          })
          .catch(() => { })
      } else {
        this.$message.warning('请选择节点!')
      }
    },
    //新增血缘关系
    add() {
      this.editItem = null
      console.log('1111')
      this.dialogFormVisible = true
    },
    //取消
    closeDialog() {
      this.dialogFormVisible = false
      //需要手动清空form绑定的内容
    },
    //确定
    confirmDialog() {
      if (this.form.region == '' || this.form.name == '') {
        this.$message.error('目录或名称为空,不能提交!')
      } else {
        const params = {
          isDirectory: 1,
          parentId: this.form.region,
          name: this.form.name,
          description: this.form.desc,
          ancestralId: 11,
          id: null
        }
          ; (this.isdisabled = true),
            addMetaModel(params).then((res) => {
              console.log(res, '提交试试')
              if (res.status == 200) {
                ; (this.isdisabled = false), (this.subParams.name = this.form.name)
                this.subParams.directoryId = res.data.data
                this.getTreeList()
                this.form = {
                  name: '',
                  region: '',
                  desc: ''
                }
                this.$message.success('新增成功!')
                this.dialogFormVisible = false
                this.modalVisible = true
              } else {
                this.$message.error('新增失败!')
              }
            })
      }
      console.log(this.modalVisible)
    },
    handleModalVisible(value) {
      this.editItem = null

      // this.getTreeList()
      if (this.filterText) {
        console.log(this.filterText)
        this.$refs.SlotTree.filter(this.filterText)
      } else {
        this.getTreeList()
      }
      this.modalVisible = value
    },
    //x6初始化
    getX6Echarts() {
      if (this.graph) {
        this.graph.dispose()
      }
      const container = this.$refs.graphContainer
      this.graph = new Graph({
        container,
        panning: true, //画布是否可拖动
        interacting: false, //是否可交互
        connecting: {
          allowBlank: false,
          allowLoop: false
          // allowNode: false
        }
      })
      this.x6List.cellList.map((item) => {
        Graph.registerNode(
          'custom-node',
          {
            width: 200,
            height: 60,
            attrs: {
              body: {
                stroke: '#5F95FF',
                strokeWidth: 1,
                fill: 'rgba(95,149,255,0.05)',
                refWidth: 1,
                refHeight: 1
              },
              image: {
                'xlink:href': require('../../assets/img/数据.png'),
                width: 30,
                height: 30,
                x: 12,
                y: 14
              },
              title: {
                text: '',

                refX: 50,
                refY: 13,
                fontSize: 16,
                fill: 'rgba(0,0,0,0.6)',
                'text-anchor': 'start'
              },
              text: {
                text: '',
                refX: 50,
                refY: 37,
                fontSize: 16,
                fill: 'rgba(0,0,0,0.6)',
                'text-anchor': 'start'
              }
            },
            markup: [
              {
                tagName: 'rect',
                selector: 'body'
              },
              {
                tagName: 'image',
                selector: 'image'
              },
              {
                tagName: 'text',
                selector: 'title'
              },
              {
                tagName: 'text',
                selector: 'text'
              }
            ]
          },
          true
        )
      })

      const newCellList = []
      this.x6List.cellList.map((v, i) => {
        const newCell = this.graph.addNode({
          x: v.x,
          y: v.y,
          width: 300,
          height: 60,
          shape: 'custom-node',
          data: {
            id: v.tableId,
            label: v.tableName
          },
          attrs: {
            title: {
              text: v.tableName
            },
            text: {
              text: v.tableDescription
            }
          },
          ports: {
            groups: {
              in: {
                position: 'top',
                attrs: {
                  circle: {
                    r: 6,
                    magnet: true,
                    stroke: '#31d0c6',
                    strokeWidth: 2,
                    fill: '#fff'
                  }
                }
              },
              out: {
                position: 'bottom',
                attrs: {
                  circle: {
                    r: 6,
                    magnet: true,
                    stroke: '#31d0c6',
                    strokeWidth: 2,
                    fill: '#fff'
                  }
                }
              },
              topLeft: {
                position: 'left',
                attrs: {
                  circle: {
                    r: 6,
                    magnet: true,
                    stroke: '#31d0c6',
                    strokeWidth: 2,
                    fill: '#fff'
                  }
                }
              },
              bottomRight: {
                position: 'right',
                attrs: {
                  circle: {
                    r: 6,
                    magnet: true,
                    stroke: '#31d0c6',
                    strokeWidth: 2,
                    fill: '#fff'
                  }
                }
              }
            },
            items: [
              {
                id: 'port1',
                group: 'in'
              },
              {
                id: 'port2',
                group: 'in'
              },
              {
                id: 'port3',
                group: 'out'
              },
              {
                id: 'port4',
                group: 'out'
              },
              {
                id: 'port5',
                group: 'topLeft'
              },
              {
                id: 'port6',
                group: 'bottomRight'
              }
            ]
          }
        })
        newCellList.push(newCell)
        // console.log(newCellList, '~~~newCellListnewCellListnewCellList')
      })

      this.x6List.edgeList.forEach((item) => {
        newCellList.forEach((newCellItem) => {
          if (item.sourceId === newCellItem.data.id) {
            item.sourceCell = newCellItem.id
          }
          if (item.targetId === newCellItem.data.id) {
            item.targetCell = newCellItem.id
          }
        })
      })

      // console.log(this.listArrray, 'hhhhhhhhhhh') // 处理后的数据将会显示出来

      this.x6List.edgeList.map((v, i) => {
        this.graph.addEdge({
          source: { cell: v.sourceCell, port: v.sourcePort },
          target: { cell: v.targetCell, port: v.targetPort }
          // ]
        })
      })
    },
    //树数据
    getTreeList() {
      this.listLoading = true
      fetchMasterdataDirectoryList(this.treeQuery).then((response) => {
        if (response.data.code == 200) {
          this.treeList = response.data.data
          this.selectOptions = response.data.data
          const fristNode = this.getFirstNode(this.treeList)
          console.log(fristNode, '处理后的selectOptionsselectOptions')
          if (this.treeList.length > 0) {
            this.listQuery.directoryId = this.treeList[0].id
            this.currentNodekey = fristNode[0].id
            this.handleNodeClick(fristNode[0])
            // this.getList()
            this.$nextTick(() => {
              this.$refs.SlotTree.setCurrentKey(this.currentNodekey) //一定要加这个选中了否则样式没有出来
            })
          }
          this.listLoading = false
        } else {
          this.$message.error(response.data.msg)
        }
        this.listLoading = false
      })
    },
    //树子项点击
    handleNodeClick(data) {
      let arr = []

      this.editItem = data
      this.listQuery.directoryId = arr.toString()
      this.deleteId = data.id
      console.log(data, '点击了树形11')
      if (data.isDirectory == '0') {
        this.form.region = data.id
        if (this.graph) {
          this.graph.dispose()
        }
      } else {
        this.form.region = data.parentId
        let id = data.modelId
        dataBloodRelation({ directoryId: id }).then((res) => {
          console.log(res.data)
          this.useList = res.data.businessSystem
          this.editItem.editParams = res.data
          const result = res.data
          if (result.topicSourceId && result.topicSourceName) {
            //如果返回的数据有主题层的,就使用 x6List 数组渲染
            this.x6List.cellList.map((item) => {
              if (item.tableId == '9991') {
                item.tableName = result.dataSourceName
                  ? result.dataSourceName
                  : '胶东调水-水量调度数据库-生产'
                item.tableDescription = result.dataSourceTableName
                  ? result.dataSourceTableName
                  : 'T_YJDD_PLAN'
              } else if (item.tableId == '9992') {
                item.tableName = result.hiveSourceName
                  ? result.hiveSourceName
                  : 'hive0229'
                item.tableDescription = result.hiveSourceTableName
                  ? result.hiveSourceTableName
                  : 't_b_sluice'
              } else if (item.tableId == '9993') {
                item.tableName = result.coreSourceName
                  ? result.coreSourceName
                  : '数据中台-胶东调水-C##JDDS_ETL'
                item.tableDescription = result.coreSourceTableName
                  ? result.coreSourceTableName
                  : 'T_ODS_JKD'
              } else if (item.tableId == '9994') {
                item.tableName = result.topicSourceName
                  ? result.topicSourceName
                  : '胶东调水-C##JDDS'
                item.tableDescription = result.topicSourceTableName
                  ? result.topicSourceTableName
                  : 'T-JKOD'
              } else if (item.tableId == '9995') {
                item.tableName = '数据服务' //由于数据服务只有一条数据,这个名字直接写死就行
                item.tableDescription = result.marketApiName
                  ? result.marketApiName
                  : '明渠水情数据'
              }
            })
          } else {
            //如果返回的数据没有主题层,就直接把 x6ListWithoutTop 赋值给x6List 渲染
            this.x6ListWithoutTop.cellList.map((item) => {
              if (item.tableId == '9991') {
                item.tableName = result.dataSourceName
                  ? result.dataSourceName
                  : '胶东调水-水量调度数据库-生产'
                item.tableDescription = result.dataSourceTableName
                  ? result.dataSourceTableName
                  : 'T_YJDD_PLAN'
              } else if (item.tableId == '9992') {
                item.tableName = result.hiveSourceName
                  ? result.hiveSourceName
                  : 'hive0229'
                item.tableDescription = result.hiveSourceTableName
                  ? result.hiveSourceTableName
                  : 't_b_sluice'
              } else if (item.tableId == '9993') {
                item.tableName = result.coreSourceName
                  ? result.coreSourceName
                  : '数据中台-胶东调水-C##JDDS_ETL'
                item.tableDescription = result.coreSourceTableName
                  ? result.coreSourceTableName
                  : 'T_ODS_JKD'
              } else if (item.tableId == '9995') {
                item.tableName = '数据服务' //由于数据服务只有一条数据,这个名字直接写死就行
                item.tableDescription = result.marketApiName
                  ? result.marketApiName
                  : '明渠水情数据'
              }
            })
            this.x6List = this.x6ListWithoutTop
          }
          //如果x6视图未更新,再次调用初始化方法
          // this.getX6Echarts()
        })
      }
    },
    // 修改节点
    handleInput(_node, _data) {
      console.log(_node, _data)

      // updateMasterdataDirectory(obj).then(res=>{
      //   if(res.data.code==0){
      //     this.$message.success(res.data.msg)
      //     this.getTreeList()
      //   }else{
      //     this.$message.error(res.data.msg)
      //   }
      // })
      // 退出编辑状态
      if (_node.isEdit) {
        this.$set(_node, 'isEdit', false)
      }
      this.getTreeList()
    },
    // 新增节点
    handleAdd(_node, _data) {
      console.log(_node, _data)
      // // 判断层级
      if (_node.level >= this.MAX_LEVEL) {
        this.$message.warning('当前已达到' + this.MAX_LEVEL + '级，无法新增！')
        return false
      }
      // 参数修改
      let obj = JSON.parse(JSON.stringify(this.initParam)) // copy参数
      obj.parentId = _data.id // 父id
      obj.name = ''
      obj[this.NODE_KEY] = --this.startId // 节点id：逐次递减id
      this.$refs.treeForm.handleCreate(obj, this.treeQuery.ancestralId)
      this.getTreeList()
    },
    handleLook(_node, _data) {
      let obj = {
        id: _data.id,
        parentId: _data.parentId,
        name: _data.name,
        description: _data.description
      }
      this.$refs.treeForm.handleLook(obj, this.treeQuery.ancestralId)
    },
    // 编辑节点
    handleEdit(_node, _data) {
      console.log(_node, _data)
      let obj = {
        id: _data.id,
        parentId: _data.parentId,
        name: _data.name,
        description: _data.description
      }
      this.$refs.treeForm.handleUpdate(obj, this.treeQuery.ancestralId)
      this.getTreeList()
    },
    // 删除节点
    handleDeletetree(_node, _data) {
      console.log(_node, _data)
      // 判断是否存在子节点
      if (_data.children && _data.children.length !== 0) {
        this.$message.error('此节点有子级，不可删除！')
        return false
      } else {
        // 删除操作
        let DeletOprate = () => {
          this.$nextTick(() => {
            if (this.$refs.SlotTree) {
              deleteMasterdataDirectory(_data.id).then((res) => {
                console.log(res, '========>>999')
                this.$message.success('删除成功！')
                this.$refs.SlotTree.remove(_data)
                this.getTreeList()
                this.form = {
                  name: '',
                  region: '',
                  desc: ''
                }
              })
            }
          })
        }

        // 二次确认
        let ConfirmFun = () => {
          this.$confirm('是否删除此节点？', '提示', {
            confirmButtonText: '确认',
            cancelButtonText: '取消',
            type: 'warning'
          })
            .then(() => {
              DeletOprate()
              this.getTreeList()
              this.form = {
                name: '',
                region: '',
                desc: ''
              }
            })
            .catch(() => { })
        }

        // 判断是否新增： 新增节点直接删除，已存在的节点要二次确认
        _data[this.NODE_KEY] < this.NODE_ID_START ? DeletOprate() : ConfirmFun()
      }
    },
    handleAddTop() {
      // 添加顶部节点
      let obj = JSON.parse(JSON.stringify(this.initParam)) // copy参数
      obj.parentId = 0
      obj.name = ''
      obj[this.NODE_KEY] = --this.startId // 节点id：逐次递减id
      // console.log(obj,'顶部参数')
      this.$refs.treeForm.handleCreate(obj, this.treeQuery.ancestralId)
      this.getTreeList()
    },
    //转化树形列表的数据
    transformTreeData(tree) {
      // 初始化一个空数组来收集选项
      let options = []

      tree.forEach((node) => {
        if (node.isDirectory === '0') {
          // 添加目录节点到选项中
          options.push({
            value: node.id,
            label: node.name
          })
          // 如果节点有子节点，递归调用并将结果附加到选项数组中
          if (node.children && node.children.length) {
            options = options.concat(this.transformTreeData(node.children))
          }
        }
      })

      return options
    },
    edit() {
      if (this.editItem) {
        if (this.editItem.isDirectory == '0') {
          this.$message.error('请选择非目录项')
        } else {
          this.editItem.isEdit = true
          this.modalVisible = true
        }
      } else {
        this.$message.error('请选择要修改的项')
      }
    },
    getFirstNode(treeList) {
      if (!Array.isArray(treeList) || treeList.length === 0) {
        // 确保 treeList 是一个非空数组
        return null
      }

      if (treeList[0].isDirectory === '1') {
        // 如果第一个节点是文件夹（目录）
        return treeList
      } else {
        // 否则递归查找子树
        return this.getFirstNode(treeList[0].children)
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.comp-tree {
  overflow: auto !important;
}

.flex {
  width: 100%;
  height: 100%;
  display: flex;
}

.left {
  width: 20vw;
  height: 100%;
  margin-right: 1.5vw;
}

.right {
  width: 78vw;
}

#x6model {
  // background-image: url('../../assets/dataRelationBg.png');
  // background-size: cover;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-left: -100px;
}

.addCatelog {
  width: 100%;
}

.r-top {
  position: relative;
}

.add {
  position: absolute;
  right: 20%;
  top: 50%;
  z-index: 99;
}

.edit {
  position: absolute;
  right: 15%;
  top: 50%;
  z-index: 99;
}

.delete {
  position: absolute;
  right: 10%;
  top: 50%;
  z-index: 99;
}

.topBox {
  width: 88%;
  height: 50%;
  margin-top: 4.6296vh;
  // background-color: tomato;
  position: relative;
  margin: 0 auto;
}

.boxItem {
  display: flex;
  flex-direction: column;
  // justify-content: center;
  align-items: center;
}

.box0 {
  position: absolute;
  top: 10%;
  left: 10%;
}

.box1 {
  position: absolute;
  top: 10%;
  left: 35%;
}

.box2 {
  position: absolute;
  top: 10%;
  left: 60%;
}

.box3 {
  position: absolute;
  top: 65%;
  left: 48%;
}

.box4 {
  position: absolute;
  top: 65%;
  left: 23%;
}

.drop {
  width: 50px;
  height: 78px;
  display: flex;
  flex-direction: column;
  // justify-content: center;
  align-items: center;

  img {
    display: block;
    width: 40px;
    height: 40px;
  }
}

.line {
  margin-top: -7px;
  height: 30px;
  border-right: 2px dashed #c8c8c8;
}

.circle {
  width: 8px;
  height: 8px;
  background: #547dff;
  border-radius: 50%;
}

.card {
  width: 265px;
  height: 144px;
  background-color: #547dff;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
  border-radius: 3%;

  .buleTitle {
    width: 100%;
    height: 30px;
    line-height: 30px;
    display: flex;
    align-items: center;

    img {
      display: block;
      width: 20px;
      height: 20px;
      margin-left: 5px;
      margin-right: 5px;
    }

    .text {
      color: #fff;
      font-family: Source Han Sans SC;
      font-weight: bold;
      font-size: 16px;
    }
  }

  .content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 114px;
    padding: 5px 20px;
    background-color: #fff;
    font-family: Source Han Sans SC;
    font-weight: 400;
    font-size: 14px;
    color: #666666;
  }

  .top {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 50%;
    line-height: 1.5;
    /* 可以微调行高 */
    text-align: center;
    border-bottom: 1px dashed #c8c8c8;
  }

  .bottom {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 50%;
    line-height: 1.5;
    /* 可以微调行高 */
    text-align: center;
  }
}

.bottomBox {
  width: 88%;
  height: 50%;
  // background-color: red;
  margin: 0 auto;
}

.bgImg {
  width: 100%;

  // margin: 0 auto;
  img {
    width: 100%;
    margin: 0 auto;
    display: block;
    width: 63.125vw;
    height: 30.2778vh;
  }
}

.useBox {
  width: 100%;
  height: 50px;
  // background-color: red;
  display: flex;
  align-items: center;
  justify-content: space-evenly;
  margin-top: 40px;
}

.useItem {
  display: flex;
  flex-direction: column;
  // justify-content: center;
  align-items: center;

  // height: 160px;
  // width: 120px;
  .point {
    width: 8px;
    height: 8px;
    background: #547dff;
    border-radius: 50%;
  }

  img {
    display: block;
    width: 90px;
    height: 90px;
  }

  .useItemText {
    width: 150px;
    height: 25px;
    background-image: url('~@/assets/img/useItemBg.png');
    background-size: contain;
    background-repeat: no-repeat;
    text-align: center;
    font-family: Source Han Sans SC;
    font-weight: 500;
    font-size: 16px;
    color: #666666;
    line-height: 26px;
  }
}

.arrowLine1 {
  width: 17.0417vw;
  // height: 20px;
  border-top: 2px dashed #c8c8c8;
  // background-color: red;
  position: absolute;
  top: 7%;
  left: 50%;
  // transform: translateX(-50%);
  z-index: -1;
  display: flex;
  align-items: center;
  justify-content: center;

  img {
    margin-top: -0.5167vw;
    width: 1.0417vw;
    height: 2.037vh;
  }
}

.arrowLine2 {
  width: 8.8vw;
  height: 24.7vh;
  // background-color: red;
  border: 2px dashed #c8c8c8;
  border-left: none;
  border-bottom: none;
  position: absolute;
  top: 7%;
  left: 50%;
  // z-index: -1;

  display: flex;
  align-items: center;
  justify-content: center;

  .img1 {
    margin-top: -11.8042vw;
    width: 1.0417vw;
    height: 2.037vh;
    transform: rotate(180deg);
  }

  .img2 {
    margin-right: -7.8083vw;
    width: 1.0417vw;
    height: 2.037vh;
    transform: rotate(-90deg);
  }
}

.move1 {
  position: absolute;
  animation: move1 4s linear infinite;
}

@keyframes move1 {
  from {
    left: 0%;
    top: 50%;
  }

  to {
    left: 90%;
    top: 50%;
  }
}

.move2 {
  position: absolute;
  animation: move2 4s linear infinite;
}

@keyframes move2 {
  from {
    right: 0%;
    top: 50%;
  }

  to {
    right: 90%;
    top: 50%;
  }
}

// .move3 {
//   position: absolute;
//   animation: move3 4s linear infinite;
// }
// @keyframes move3 {
//   from {
//     left: 100%;
//     top: 50%;
//   }
//   to {
//     left: 0%;
//     top: 0%;
//   }
// }
.move4 {
  position: absolute;
  animation: move4 4s linear infinite;
}

@keyframes move4 {
  from {
    left: 94%;
    top: 0%;
  }

  to {
    left: 94%;
    top: 90%;
  }
}

::v-deep(::-webkit-scrollbar) {
  display: block !important;
}

.comp-tree {
  width: 331.83px !important;
  height: 1080px !important;
}
</style>
